<template>
    <div>
      <h3>软件2351学生表</h3>
      <select v-model="showType">
        <option value="table">table</option>
        <option value="card">card</option>
      </select>
      <table v-if="showType == 'table'" class="table table-striped table-hover">
        <tr>
          <td>seq</td>
          <td>stuNo</td>
          <td>name</td>
          <td>sex</td>
          <td>js</td>
          <td>java</td>
          <td>python</td>
          <td>ds</td>
          <td>la</td>
          <td>total</td>
        </tr>
        <tbody>
          <student-table v-for="(stu, index) in students" :key="index" :student="stu"></student-table>
        </tbody>
      </table>
      <student-card v-if="showType == 'card'"
       v-for="(stu,index) in students" 
       :key="index"
       :student="stu"></student-card>
    </div>
  </template>
  
  <script>
  import students from '@/api/students'
  import StudentTable from '@/components/students/StudentTable.vue'
  import StudentCard from '@/components/students/StudentCard.vue'
  export default {
    components: {
      StudentCard,
      StudentTable,
    },
  
    data() {
      return {
        showType: '',
        students: students,
      }
    },
  }
  </script>
  
  <style lang="scss" scoped></style>